Nodejs 환경 설정

✒️ 2025-05-26 13:09 내용 수정

Node.js 교과서 개정 3판 내용 정리

서버 설정

1. 서버 파일 생성

server.js 파일을 생성한다.

nodejs setting 1.png

메뉴에서 터미널 - 새 터미널로 터미널을 열거나, Ctrl + Shift + ` 로 터미널을 연다.

nodejs setting 2.png

터미널에 npm init -y를 입력한다. 정상적으로 가동되었다면 package.json 파일을 확인할 수 있다.

nodejs setting 3.png
nodejs setting 4.png

2. express 프레임워크 설치

터미널에 npm install express를 입력해 express 프레임워크를 다운받는다.

nodejs setting 5.png

server.js에 express 문법으로 서버를 포트에 연결하고, 라우팅을 설정한다.

// server 설정

// express 라이브러리 불러오기
const express = require('express');
const app = express();

// 포트 연결
app.listen(8081, () => { // 사용하려는 포트 번호를 입력
    console.log('http://localhost:8081 에서 접속중');
})

// 사이트 경로 설정
// 라우팅 - express lib 문법
app.get('/', (request, response) => {
    response.send('Hello Node.js!');
})

터미널에 node server.js를 입력해 서버를 실행하고, http://localhost:포트번호 를 웹 브라우저 주소창에 입력해 작성한 내용이 잘 뜨는지 확인한다.

nodejs setting 7.png
nodejs setting 6.png

3. 파일 연결

public 폴더를 생성한다. public 폴더 안에는 이미지 파일과 css 파일을 저장하고, server.js와 같은 경로에 테스트를 위한 index.html 파일을 생성한다.

nodejs setting 8.png

먼저 html 연결을 하기 위해 라우팅에서 response.sendFile('파일경로') 문구를 추가한다.
- __dirname은 현재 경로명을 의미하며, __filename은 현재 파일명을 의미한다.

// express 라이브러리 불러오기
const express = require('express');
const app = express();

// 포트 연결
app.listen(8081, () => {
    console.log('http://localhost:8081 에서 접속중');
})

// 사이트 경로 설정
// 라우팅 - express lib 문법
app.get('/', (request, response) => {
    response.send('Hello Node.js!');
})

app.get('/home', (request, response) => {
    response.sendFile(__dirname + '/index.html');
})

nodejs setting 9.png

이번엔 CSS를 적용하기 위해 app.use(express.static(__dirname + '/public/'))을 추가한다.
HTML에도 <link> 태그를 이용해 CSS를 연결한다.

// express 라이브러리 불러오기
const express = require('express');
const app = express();

// public 지정하기
app.use(express.static(__dirname + '/public/'))

// 포트 연결
app.listen(8081, () => {
    console.log('http://localhost:8081 에서 접속중');
})

// 사이트 경로 설정
// 라우팅 - express lib 문법
app.get('/', (request, response) => {
    response.send('Hello Node.js!');
})

app.get('/home', (request, response) => {
    response.sendFile(__dirname + '/index.html');
})

nodejs setting 10.png